﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../Styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.9.0.min.js"></script>
    <meta name="keywords" content="jQuery, Navigation Bar, Accordion, Panel Bar, Navigation Widget, Panel, Accordion Bar" />
    <meta name="description" content="This page represents the help documentation of the jqxNavigationBar widget." />
    <title>jqxNavigationBar API Reference</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>
    <div id="properties">
        <h2 class="documentation-top-header">
            Properties</h2>
        <table class="documentation-table">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Type
                </th>
                <th>
                    Default
                </th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span63'>theme</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    ''
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the widget's theme.</p>
                        jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The
                        base stylesheet creates the styles related to the widget's layout like margin, padding,
                        border-width, position. The second css file applies the widget's colors and backgrounds.
                        The jqx.base.css should be included before the second CSS file. In order to set
                        a theme, you need to do the following:
                        <ul>
                            <li>Include the theme's CSS file after jqx.base.css.<br />
                                The following code example adds the 'energyblue' theme.
                                <pre><code>
                                    <pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.base.css&quot;
                                        type=&quot;text/css&quot; /&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.energyblue.css&quot;
                                        type=&quot;text/css&quot; /&gt; </code></pre>
                                </code></pre>
                            </li>
                            <li>Set the widget's theme property to 'energyblue' when you initialize it. </li>
                        </ul>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='property-name-disabled'>expandAnimationDuration</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    400
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets the expanding animation duration.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a with the <code>expandAnimationDuration</code> property specified.
                        </p>
                        <pre><code>$('#jqxNavigationBar').jqxNavigationBar({ expandAnimationDuration: 400 });
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span1'>collapseAnimationDuration</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    400
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets the collapsing animation duration.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a jqxNavigationBar with the <code>collapseAnimationDuration</code> property
                            specified.
                        </p>
                        <pre><code>$('#jqxNavigationBar').jqxNavigationBar({ collapseAnimationDuration: 400
                            }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span3'>disabled</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets whether the navigation bar is disabled.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a jqxNavigationBar with the <code>disabled</code> property specified.
                        </p>
                        <pre><code>$('#jqxNavigationBar').jqxNavigationBar({ disabled:true }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span4'>animationType</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    'slide'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets the animation type. Possible values ['slide', 'fade', 'none'].</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a jqxNavigationBar with the <code>animationType</code> property specified.
                        </p>
                        <pre><code>$('#jqxNavigationBar').jqxNavigationBar({animationType: "none" }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span6'>toggleMode</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    click
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets user interaction used for expanding or collapsing the content. Possible
                            values ['click', 'dblclick', 'none'].</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a jqxNavigationBar with the <code>toggleMode</code> property specified.
                        </p>
                        <pre><code>$('#jqxNavigationBar').jqxNavigationBar({ toggleMode: "none" }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span10'>expandMode</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    'singleFitHeight'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets navigation bar's expand mode. Possible values ['single', 'singleFitHeight'
                            'multiple', 'toggle', 'none'].</p>
                        <ul>
                            <li>'single' - only one item can be expanded. If the expanded item's height is greater
                                than the value of the <code>height</code> property, a vertical scrollbar is shown.</li>
                            <li>'singleFitHeight' - only one item can be expanded. If the expanded item's height
                                is greater than the value of the <code>height</code> property, a vertical scrollbar
                                is shown inside the content of the expanded item.</li>
                            <li>'multiple' - multiple items can be expanded. If the expanded items' height is greater
                                than the value of the <code>height</code> property, a vertical scrollbar is shown.</li>
                            <li>'toggle' - only one item can be expanded. The expanded item can also be collapsed.
                                If the expanded item's height is greater than the value of the <code>height</code>
                                property, a vertical scrollbar is shown.</li>
                            <li>'none' - no items can be expanded/collapsed.</li>
                        </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a jqxNavigationBar with the <code>expandMode</code> property specified.
                        </p>
                        <pre><code>$('#jqxNavigationBar').jqxNavigationBar({ expandMode: "none" }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span7'>arrowPosition</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    'right'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets header's arrow position. Possible values ['left', 'right'].</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a jqxNavigationBar with the <code>arrowPosition</code> property specified.
                        </p>
                        <pre><code>$('#jqxNavigationBar').jqxNavigationBar({ arrowPosition: "right" }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span8'>showArrow</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets whether header's arrow is going to be shown.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a jqxNavigationBar with the <code>showArrow</code> property specified.
                        </p>
                        <pre><code>$('#jqxNavigationBar').jqxNavigationBar({ showArrow: false }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span5'>expandedIndexes</span>
                </td>
                <td>
                    <span>Array</span>
                </td>
                <td>
                    []
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets the expanded item(s). If the property <code>expandMode</code> is set
                            to either 'single', 'singleFitHeight', 'toggle' or 'none', only the item corresponding
                            to the first value in the array is expanded. If the property <code>expandMode</code>
                            is set to either 'single' or 'singleFitHeight' and the expandedIndexes array is
                            empty, the first item is expanded automatically.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a jqxNavigationBar with the <code>expandedIndexes</code> property specified.
                        </p>
                        <pre><code>$('#jqxNavigationBar').jqxNavigationBar({ expandedIndexes: [0, 1] }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span9'>height</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    'auto'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets the navigationbar's height. Possible values - 'auto' or string like
                            this 'Npx' where N is any Number or a numeric value in pixels.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a NavigationBar with the <code>height</code> property specified.
                        </p>
                        <pre><code>$('#jqxNavigationBar').jqxNavigationBar({ height: 200 }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span11'>width</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    'auto'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets the navigationbar's width. Possible values - 'auto' or string like
                            this 'Npx' where N is any Number or a numeric value in pixels.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a NavigationBar with the <code>width</code> property specified.
                        </p>
                        <pre><code>$('#jqxNavigationBar').jqxNavigationBar({ width: 'auto' }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span12'>initContent</span>
                </td>
                <td>
                    <span>function</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Callback function called when an item's content needs to be initialized. Useful
                            for initializing other widgets within the content of any of the items of jqxNavigationBar.
                            The index argument shows which item is initialized.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a jqxNavigationBar with the <code>initContent</code> property specified.
                            When an item is initialized, the jqxButton wiwdget will also be initialized.
                        </p>
                        <pre><code>$("#jqxNavigationBar").jqxNavigationBar({ initContent: function (index) {
                            $("#jqxButton").jqxButton({ width: 100, height: 50 }); }</code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span30'>rtl</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Determines whether the right-to-left support is enabled.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a jqxNavigationBar with the <code>rtl</code> property specified.
                        </p>
                        <pre><code>$("#jqxNavigationBar").jqxNavigationBar({ rtl: true }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">
                        Events</h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span27'>expandingItem</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a jqxNavigationBar item is going to be expanded.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the expandingItem event by type: jqxNavigationBar.
                        </p>
                        <pre><code>$('#jqxNavigationBar').on('expandingItem', function (event) { var expandingItem
                            = event.args.item; alert("Expanding item number: " + expandingItem); });</code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span2'>expandedItem</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a jqxNavigationBar item is expanded.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the expandedItem event by type: jqxNavigationBar.
                        </p>
                        <pre><code>$('#jqxNavigationBar').on('expandedItem', function (event) { var expandedItem
                            = event.args.item; alert("Expanded item number: " + expandedItem); });</code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span13'>collapsingItem</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a jqxNavigationBar item is going to be collapsed.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the collapsingItem event by type: jqxNavigationBar.
                        </p>
                        <pre><code>$('#jqxNavigationBar').on('collapsingItem', function (event) { var collapsingItem
                            = event.args.item; alert("Expanding item number: " + collapsingItem); });</code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span19'>collapsedItem</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a jqxNavigationBar item is collapsed.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the collapsedItem event by type: jqxNavigationBar.
                        </p>
                        <pre><code>$('#jqxNavigationBar').on('collapsedItem', function (event) { var collapsedItem
                            = event.args.item; alert("Expanding item number: " + collapsedItem); });</code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">
                        Methods</h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span37'>collapseAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Collapsing item with any index.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the collapseAt method.
                        </p>
                        <pre><code>$('#jqxNavigationBar').jqxNavigationBar('collapseAt', 3); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span14'>expandAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Expanding item with any index.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the expandAt method.
                        </p>
                        <pre><code>$('#jqxNavigationBar').jqxNavigationBar('expandAt', 3); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span15'>setContentAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Setting content to item with any index.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the setContentAt method.
                        </p>
                        <pre><code>$('#jqxNavigationBar').jqxNavigationBar('setContentAt', 3, 'Content'); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span16'>setHeaderContentAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Setting header content to item with any index
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the setHeaderContentAt method.
                        </p>
                        <pre><code>$('#jqxNavigationBar').jqxNavigationBar('setHeaderContentAt', 3, 'Header');</code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span17'>getHeaderContentAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Getting header content of item with any index. Returns a string value.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getHeaderContentAt method.
                        </p>
                        <pre><code>var header = $('#jqxNavigationBar').jqxNavigationBar('getHeaderContentAt',3);
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span18'>getContentAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Getting content of item with any index. Returns a string value.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getContentAt method.
                        </p>
                        <pre><code>var content = $('#jqxNavigationBar').jqxNavigationBar('getContentAt', 3);
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span20'>disableAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Disabling item with any index.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the disable method.
                        </p>
                        <pre><code>$('#jqxNavigationBar').jqxNavigationBar('disableAt', 3); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span21'>enableAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Enabling item with any index.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the enableAt method.
                        </p>
                        <pre><code>$('#jqxNavigationBar').jqxNavigationBar('enableAt', 3); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span25'>showArrowAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Showing the arrow of an item with specific index.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the showArrowAt method.
                        </p>
                        <pre><code>$('#jqxNavigationBar').jqxNavigationBar('showArrowAt', 3); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span26'>hideArrowAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Hiding the arrow of an item with specific index.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the hideArrowAt method.
                        </p>
                        <pre><code>$('#jqxNavigationBar').jqxNavigationBar('hideArrowAt', 3); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span28'>disable</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This method is disabling the navigation bar.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the disable method.
                        </p>
                        <pre><code>$('#jqxNavigationBar').jqxNavigationBar('disable'); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span29'>enable</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This method is enabling the navigation bar.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the enable method.
                        </p>
                        <pre><code>$('#jqxNavigationBar').jqxNavigationBar('enable'); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span23'>invalidate</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This method refreshes the navigationbar.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the invalidate method.
                        </p>
                        <pre><code>var header = $('#jqxNavigationBar').jqxNavigationBar('invalidate'); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span24'>refresh</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This method refreshes the navigationbar.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the refresh method.
                        </p>
                        <pre><code>var header = $('#jqxNavigationBar').jqxNavigationBar('refresh'); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span31'>render</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This method renders the navigationbar.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the render method.
                        </p>
                        <pre><code>var header = $('#jqxNavigationBar').jqxNavigationBar('render'); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span32'>destroy</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This method destroys the navigationbar.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the destroy method.
                        </p>
                        <pre><code>var header = $('#jqxNavigationBar').jqxNavigationBar('destroy'); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span22'>insert</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This method inserts an item at a specific index. It has three parameters - index,
                            header (the header of the new item) and content (the content of the new item).
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the insert method.
                        </p>
                        <pre><code>var header = $('#jqxNavigationBar').jqxNavigationBar('insert', 1, 'Header',
                            'Content'); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span33'>add</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This method inserts an item at the bottom of the navigationbar. It has two parameters
                            - header (the header of the new item) and content (the content of the new item).
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the insert method.
                        </p>
                        <pre><code>var header = $('#jqxNavigationBar').jqxNavigationBar('add', 'Header', 'Content');
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span34'>update</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This method updates an item at a specific index. It has three parameters - index,
                            header (the new header of the item) and content (the new content of the item).
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the insert method.
                        </p>
                        <pre><code>var header = $('#jqxNavigationBar').jqxNavigationBar('update', 0, 'New header',
                            'New content'); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span35'>remove</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This method removes an item at a specific index. The parameter (index) is optional
                            and if it is not set, the method removes the last item.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the insert method.
                        </p>
                        <pre><code>var header = $('#jqxNavigationBar').jqxNavigationBar('remove', 0); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span36'>focus</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This method focuses on the navigationbar. When the widget is focused, keyboard navigation
                            can be used. Here is a list of the keys, supported by jqxNavigationBar and their
                            function:
                        </p>
                        <ul>
                            <li><b>Enter</b>/<b>Spacebar</b> - if the focus is on an item header, collapses or expands
                                the item.</li>
                            <li><b>Left</b>/<b>Up arrow</b> - focuses on the previous item header or on the last
                                one if the currently focused is the first one.</li>
                            <li><b>Right</b>/<b>Down arrow</b> - focuses on the next item header or on the first
                                one if the currently focused is the last one.</li>
                            <li><b>End</b> - focuses on the last item header.</li>
                            <li><b>Home</b> - focuses on the first item header.</li>
                            <li><b>Tab</b> - focuses on the first header or the next element in the DOM.</li>
                            <li><b>Ctrl</b>+<b>Up arrow</b> - if the focus is on an item content, focuses on its
                                respective header.</li>
                            <li><b>Ctrl</b>+<b>Down arrow</b> - if the focus is on an item header, focuses on its
                                respective content.</li>
                        </ul>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the focus method.
                        </p>
                        <pre><code>var header = $('#jqxNavigationBar').jqxNavigationBar('focus'); </code></pre>
                    </div>
                </td>
            </tr>
        </table>
        <br />
    </div>
</body>
</html>
